Testear MatDialog con Jasmine

Descripcion

Testear la respuesta de un componente MatDialog desde el componente que se llama, fakeando la respuesta.

Código

Funcion que llama al MatDialog:

  showDeleteUser(id: string) {
    let titleDelete = "Eliminar el usuario";
    let messageDelete = "Quieres eliminar el usuario?";

    const dialogRef = this._userDeleteDialog.open(ConfirmDialogComponent, {
      data: { title: titleDelete, message: messageDelete},
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        this.deleteUser(id);
      }
    });
  }

Tests para comproba tanto la respuesta positiva como negativa:

  it('showDeleteUser should call deleteUser if dialog returns true', () => {
    let dialogResult = true;
    let userToDelete = 'exampleUser';
    let dialogRefSpyObj = jasmine.createSpyObj({
      afterClosed: of(dialogResult),
      close: dialogResult,
    });
    spyOn(component, 'deleteUser');
    spyOn(TestBed.inject(MatDialog), 'open').and.returnValue(dialogRefSpyObj);

    component.showDeleteUser(userToDelete);

    expect(component.deleteUser).toHaveBeenCalledWith(userToDelete);
  });

  it('showDeleteUser should NOT call deleteUser if dialog returns false', () => {
    let dialogResult = false;
    let userToDelete = 'exampleUser';
    let dialogRefSpyObj = jasmine.createSpyObj({
      afterClosed: of(dialogResult),
      close: dialogResult,
    });
    spyOn(component, 'deleteUser');
    spyOn(TestBed.inject(MatDialog), 'open').and.returnValue(dialogRefSpyObj);

    component.showDeleteUser(userToDelete);

    expect(component.deleteUser).not.toHaveBeenCalled();
  });
Tags

Test | MatDialog | Jasmine